<script setup lang="ts">

import {computed, onBeforeUnmount, onMounted, ref} from "vue";

const currentTime = ref(new Date())

defineOptions({
  name: "DateLabel",
})

let timer = null

// 时间格式化函数
const formatTime = (date: Date) => {
  return date.toLocaleTimeString('zh-CN', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}
const formatDate = (date: Date) => {
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  })

}
const formatWeekDay = (date: Date) => {
  return date.toLocaleDateString('zh-CN', {
    weekday: 'short'
  })
}
// 自动更新时间
const updateTime = () => {
  currentTime.value = new Date()
}

// 响应式格式化时间
const formattedTime = computed(() => formatTime(currentTime.value))
const formattedDate = computed(() => formatDate(currentTime.value))
const formattedWeekday = computed(() => formatWeekDay(currentTime.value))

onMounted(() => {
  timer = setInterval(updateTime, 1000)
})

onBeforeUnmount(() => {
  clearInterval(timer)
})

</script>

<template>
  <div class="time-display">
    <div class="time">
      <span>{{ formattedTime }}</span>
    </div>
    <div class="date">
      <span class="date-info">{{formattedWeekday}}</span>
      <span class="date-info">{{formattedDate}}</span>
    </div>
  </div>
</template>

<style scoped>
.time-display {
  pointer-events: none;
  min-width: 10%;
  display: flex;
  align-items: center;
  background-color: rgba(255,255,255, 0); /* 背景色 */
  padding: 1px; /* 内边距 */
  border-radius: 5px; /* 圆角 */
  font-family: Arial, sans-serif; /* 字体 */
}

.time {
  min-width: 80px;
  font-size: 26px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
  margin-right: 10px; /* 与日期之间的间距 */
  color: #f9f9f9;
}

.date {
  font-size: 16px; /* 字体大小 */
  color: #ffffff; /* 字体颜色 */
  .date-info {
    display: list-item;
    list-style: none;
    text-align: left;
    font-size: 10px;
  }
}

</style>